<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <div class="contract-detail-header-table">
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>库位编号</td>
              <td> {{ LocationDetail.number }} </td>
              <td>库位名称 </td>
              <td>{{ `${LocationDetail.name}` }} </td>
            </tr>
            <tr>
              <td>库位规格 </td>
              <td>
                {{
                  `${LocationDetail.long}m×${LocationDetail.high}m×${LocationDetail.mark}m `
                }}
              </td>
              <td>最大承重量 </td>
              <td>
                {{ `${LocationDetail.weight}m ` }}
              </td>
            </tr>
            <tr>
              <td>物料存放类型 </td>
              <td>
                {{ LocationDetail.materialName }}
              </td>
              <td>指定存放物料 </td>
              <td> {{ LocationDetail.materialName }} </td>
            </tr>
            <tr>
              <td>所在位置 </td>
              <td>
                {{ LocationDetail.location }}
              </td>
              <td>启用状态 </td>
              <td>启用 </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="contract-detail-header-qrcode"
        ><qrcode-vue
          :value="`${LocationDetail.id}`"
          :size="200"
          level="H"
        ></qrcode-vue>
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <MaterialListingList v-if="item.key === '2'"></MaterialListingList>
          <OffShelf v-if="item.key === '3'"></OffShelf>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { getLocationOne } from '@/api/inventory-management/warehouse-management/location-list/index';
  import QrcodeVue from 'qrcode.vue';
  import MaterialListingList from './components/material-listing.vue';
  import OffShelf from './components/off-shelf.vue';

  const route = useRoute();

  const id = Number(route.query.id); // 合同id

  const title: string = '库位详情';

  const breadCrumb: string[] = ['库存管理', '库位列表', '库位详情'];

  let LocationDetail = ref<any>({}); // 储存客户信息

  const getcontractDetailData = async () => {
    try {
      // 获取合同详情
      const res: any = await getLocationOne({ id });
      LocationDetail.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '物料信息',
    },
    {
      key: '2',
      title: '物料上架记录',
    },
    {
      key: '3',
      title: '物料下架记录',
    },
  ]);
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;
      height: 254px;
      display: flex;
      &-table {
        width: 80%;
        table {
          width: 100%;
          border-color: #f9f9f9;
          tr {
            height: 58px;
            text-align: center;
          }
          td:nth-child(odd) {
            background-color: #f5f7fa;
            width: 200px;
          }
          td:nth-child(even) {
            width: 389px;
          }
        }
      }
      &-qrcode {
        width: 20%;
        border: 1px solid rgb(165, 165, 165);
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: none;
      }
    }
  }
</style>
